<template>
  <div class="">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>挂号详情</span>
        </div>
      </template>
      <div>
        <el-tag type="success" effect="dark">
          {{ orderInfo.param?.orderStatusString }}
        </el-tag>
        {{ orderInfo.orderStatus }}
      </div>
      <el-divider />
      <el-descriptions :column="1" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊人信息</div>
          </template>
          {{ orderInfo.patientName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊日期</div>
          </template>
          {{ orderInfo.reserveDate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊医院</div>
          </template>
          {{ orderInfo.hosname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊科室</div>
          </template>
          {{ orderInfo.depname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生职称</div>
          </template>
          {{ orderInfo.title }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生服务费</div>
          </template>
          {{ orderInfo.amount }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">挂号订单</div>
          </template>
          {{ orderInfo.outTradeNo }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">挂号时间</div>
          </template>
          {{ orderInfo.createTime }}
        </el-descriptions-item>
      </el-descriptions>
      <div v-if="orderInfo.orderStatus == 0 || orderInfo.orderStatus == 1">
        <el-divider />
        <el-popconfirm title="确定取消此订单?" @confirm="cancel">
          <template #reference>
            <el-button>取消预约</el-button>
          </template>
        </el-popconfirm>
        <el-button
          type="primary"
          v-if="orderInfo.orderStatus == 0"
          @click="openDialog"
        >
          支付
        </el-button>
      </div>
    </el-card>
    <!-- 支付二维码对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="微信支付"
      width="30%"
      @close="clearTime"
    >
      <div class="img">
        <img :src="qrImgUrl" alt="" srcset="" />
      </div>
      <span>请使用微信扫一扫</span>
      <span>扫描二维码支付</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">关闭窗口</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
let $route = useRoute();
import {
  reqOrderInfo,
  reqCancelOrder,
  reqQrcode,
  reqPayResult,
} from "@/api/user/index";
import type {
  OrderInfo,
  OrderResponseData,
  Qrcode,
  PayResult,
} from "@/api/user/type";
import { ElMessage } from "element-plus";
// 生成二维码的插件
import QRCode from "qrcode";
// 支付二维码对话框 显示隐藏
let dialogVisible = ref<boolean>(false);
let orderInfo = ref<any>({});
// 存储二维码路径
let qrImgUrl = ref<string>("");
// 存储定时器
let timer = ref<any>();
let timer2 = ref<any>();
onMounted(() => {
  getOrderInfo();
});
// 获取订单详情的数据
const getOrderInfo = async () => {
  // const result:OrderResponseData = await reqOrderInfo($route.query.orderId);
  const result = $route.query.orderId;
  orderInfo.value = {
    patientName: "张三",
    reserveDate: "2023-06-08",
    hosname: "beijingxx",
    depname: "asdfasd",
    title: "asdasdadasd",
    amount: "100",
    outTradeNo: "asdasdadadasdasdasdasdas",
    createTime: "00-00-00",
    param: {
      orderStatusString: "预约成功，待支付",
    },
    orderStatus: 0, //0提交订单 -1取消了 1支付了
  };
};
// 取消订单 气泡 回调
const cancel = async () => {
  // const result = await reqCancelOrder($route.query.orderId as string);
  const result = 1;
  if (result) {
    orderInfo.value.param.orderStatusString = "取消预约";
    orderInfo.value.orderStatus = -1;
  }
  // try {
  //   // 取消预约成功
  //   await reqCancelOrder($route.query.orderId as string);
  //   // 再次获取订单
  // } catch (error) {
  //   ElMessage({
  //     type: "error",
  //     message: "取消预约失败",
  //   });
  // }
};
// 打开支付二维码对话框
const openDialog = async () => {
  console.log("接口坏掉通过定时器改变本地数据实现支付成功效果---等10s---");
  dialogVisible.value = true;
  // 发请求，获取支付二维码
  // const result: Qrcode = await reqQrcode($route.query.orderId as string);
  const result: Qrcode = {
    code: 200,
    message: "成功",
    data: {
      // codeUrl: "weixin://wxpay/bizpayurl?pr=6rI1fb7zz",
      codeUrl: "tian wai lai wu",
      orderId: 431,
      resultCode: "SUCCESS",
      totalFee: 100,
    },
    ok: true,
  };
  // 根据服务器返回二维码信息生成二维码图片
  qrImgUrl.value = await QRCode.toDataURL(result.data.codeUrl);
  // 查询支付结果 二维码出来以后每隔几秒就查询一次
  let result2: PayResult = {
    code: 200,
    message: "支付中",
    data: false,
    ok: true,
  };
  timer2.value = setTimeout(() => {
    result2.message = "支付成功";
    result2.data = true;
  }, 10000);
  timer.value = setInterval(() => {
    // const result: PayResult = reqPayResult($route.query.orderId as string);
    // const result: PayResult = {
    //   code: 200,
    //   message: "支付中",
    //   data: false,
    //   ok: true,
    // };
    // setTimeout(() => {
    //   console.log(111);
    //   result.message = "支付成功";
    //   result.data = true;
    // }, 4000);
    console.log(result2);
    // data为true支付成功
    if (result2.data) {
      // result.message = "支付成功";
      // result.data = true;
      // 关闭对话框
      dialogVisible.value = false;
      // 提示信息
      ElMessage({
        type: "success",
        message: "支付成功",
      });
      // 清楚定时器
      clearInterval(timer.value);
      // 重新获取数据
      // getOrderInfo();
      orderInfo.value = {
        patientName: "张三",
        reserveDate: "2023-06-08",
        hosname: "beijingxx",
        depname: "asdfasd",
        title: "asdasdadasd",
        amount: "100",
        outTradeNo: "asdasdadadasdasdasdasdas",
        createTime: "00-00-00",
        param: {
          orderStatusString: "支付成功",
        },
        orderStatus: 1, //0提交订单 -1取消了 1支付了
      };
    }
  }, 2000);
};
// 关闭支付窗口
const closeDialog = () => {
  dialogVisible.value = false;
};
// 窗口关闭的回调
const clearTime = () => {
  console.log(11111);
  console.log(orderInfo.value);
  clearInterval(timer.value);
  clearInterval(timer2.value);
};
</script>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
::v-deep(.el-dialog__body) {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .img {
    width: 300px;
    height: 300px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  span {
    margin-top: 10px;
  }
}
</style>
